<template>
  <el-menu
    :class="{ 'small-font': smallFont }"
    @select="select"
    class="top-menu"
    mode="horizontal"
    text-color="#DCDFE6"
    active-text-color="#fff"
  >
    <el-menu-item
      class="none-active right-space logoTi title"
      :index="INDEX"
      v-show="makeng == true"
      ><img
        class="logo"
        src="../assets/nav_logo_backup.png"
        alt="回到首页"
      /><span>福建马坑矿业股份有限公司</span></el-menu-item
    >
    <el-menu-item
      class="none-active right-space logoTi title"
      :index="INDEX"
      v-show="qiucheng == true"
      ><span>德化县丘埕矿业有限公司</span></el-menu-item
    >
    <el-menu-item :index="INDEX"
      ><span><i v-if="showIcon" class="icon-w-home" />首页</span></el-menu-item
    >
    <el-menu-item :index="BASIC_INFORMATION"
      ><span
        ><i v-if="showIcon" class="icon-w-list" />基础信息</span
      ></el-menu-item
    >
    <el-menu-item :index="SECURITY_MANAGEMENT" :disabled="show"
      ><span
        ><i v-if="showIcon" class="icon-w-shield" />安全管理</span
      ></el-menu-item
    >
    <el-menu-item :index="MONITORING"
      ><span
        ><i v-if="showIcon" class="icon-w-screen" />监测监控</span
      ></el-menu-item
    >
    <el-menu-item :index="WARNING_MANAGEMENT" :disabled="show"
      ><span
        ><i v-if="showIcon" class="icon-w-warning" />预警管理</span
      ></el-menu-item
    >
    <el-menu-item :index="SAFETY_TECHNOLOGY" :disabled="show"
      ><span
        ><i v-if="showIcon" class="icon-w-technology" />安全技术</span
      ></el-menu-item
    >
    <el-menu-item :index="ANALYSIS_REPORT" :disabled="show"
      ><span
        ><i v-if="showIcon" class="icon-w-note" />分析报告</span
      ></el-menu-item
    >
    <el-menu-item :index="SYSTEM_MANAGEMENT"
      ><span
        ><i v-if="showIcon" class="icon-w-config" />系统管理</span
      ></el-menu-item
    >
    <el-submenu index="MAN" class="none-active right-move none-drop-submenu">
      <template slot="title"><i class="icon-w-avatar man"></i></template>
      <el-menu-item @click="cPwdDialogVisible = true"><span>修改密码</span></el-menu-item>
      <el-menu-item :index="`${LOGIN}`"><span>用户退出</span></el-menu-item>
    </el-submenu>
    <!-- 修改密码 -->
    <el-dialog
      title="修改用户密码"
      :visible.sync="cPwdDialogVisible"
      width="30%"
    >
      <el-form
        :model="resetForm"
        :rules="resetFormRules"
        ref="resetForm"
        status-icon
        label-width="100px"
      >
        <el-form-item label="旧密码：" prop="password">
          <el-input
            type="password"
            v-model="resetForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newpwd">
          <el-input
            type="password"
            v-model="resetForm.newpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="newPassword">
          <el-input
            type="password"
            v-model="resetForm.newPassword"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="buttonfrom">
          <el-button type="primary" @click.native.prevent="toAmend"
            >确认修改</el-button
          >
          <el-button @click="cPwdDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-menu>
</template>

<script>
import axios from "axios";
import {
  ROOT,
  INDEX,
  BASIC_INFORMATION,
  SECURITY_MANAGEMENT,
  MONITORING,
  WARNING_MANAGEMENT,
  SAFETY_TECHNOLOGY,
  ANALYSIS_REPORT,
  SYSTEM_MANAGEMENT,
  LOGIN,
} from "~/router";
import { detectZoom } from "~/utils/DpiUtils";
import md5 from "js-md5";

/**
 * 页面一级选项卡
 */
export default {
  name: "TopNavMenu",
  data() {
    return {
      ROOT,
      INDEX,
      BASIC_INFORMATION,
      SECURITY_MANAGEMENT,
      MONITORING,
      WARNING_MANAGEMENT,
      SAFETY_TECHNOLOGY,
      ANALYSIS_REPORT,
      SYSTEM_MANAGEMENT,
      LOGIN,
      showIcon: true,
      smallFont: false,
      makeng: false,
      qiucheng: false,
      show: false,
      platformName: window.localStorage.getItem("platformName"),
      cPwdDialogVisible: false,
      resetForm: {
        //传给后台所需要的参数
        password: "",
        newPassword: "",
      },
      resetFormRules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newpwd: [
          { required: true, validator: this.validatePass, trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: this.validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (this.$route.params.enterprise == "qiucheng") {
      this.show = true;
    }
    if (this.$route.params.enterprise == "makeng") {
      this.makeng = true;
      //   this.qiucheng =false
    }
    if (this.$route.params.enterprise == "qiucheng") {
      this.qiucheng = true;
    }
    this.userId = window.sessionStorage.getItem("userId");
    console.log(this.userId);
  },
  methods: {
    validatePass(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error("密码长度为6-18位"));
      } else {
        callback();
      }
    },
    validatePass2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    select(index) {
      if (index) {
        this.$emit("select", index);
      }
    },
    toAmend() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          const data = {
            userId: this.userId,
            password: md5(this.resetForm.password),
            newPassword: md5(this.resetForm.newPassword),
          };
          const formData = new FormData();
          for (const [key, value] of Object.entries(data)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/web/updatePassword",
            data: formData,
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode == "200") {
              this.$message({
                type: "success",
                message: "修改密码成功",
                offset: 400,
                duration: 1000,
              });
              this.$router.push({ name: LOGIN });
            }
             else {
              this.$message({
                type: "error",
                message: "修改密码失败",
                offset: 400,
                duration: 1000,
              });
            }
          });
          this.cPwdDialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
  },
  computed: {},
  mounted() {
    console.log(this.$route.params.enterprise);
    const zoom = detectZoom();
    this.showIcon = zoom <= 182;
    this.smallFont = zoom > 150;
  },
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: 700;
  vertical-align: middle;
}
.top-menu {
  height: 7.3vh;
  background-color: #12203d;
  border-bottom: none;
}
.top-menu span {
  font-size: 1.5em;
}
.top-menu li {
  height: 100%;
}
.top-menu .is-active:focus {
  background: -moz-linear-gradient(top, #1f459500, #1f4595ff); /*火狐*/
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#1f459500),
    to(#1f4595ff)
  ); /*谷歌*/
}

.top-menu .is-active {
  background: -moz-linear-gradient(top, #1f459500, #1f4595ff); /*火狐*/
  background: -webkit-gradient(
    linear,
    0% 0%,
    0% 100%,
    from(#1f459500),
    to(#1f4595ff)
  ); /*谷歌*/
}
.top-menu .el-menu-item:hover {
  background-color: #0f368588;
}
.top-menu .none-active {
  background: none;
  border: none;
}
.top-menu .logo {
  margin-top: 5px;
  height: 85%;
}
.small-font .logo {
  margin-top: 0;
}
.top-menu .right-space {
  margin-right: 0.5vw;
}
.top-menu .man {
  font-size: 2.4em;
}
.top-menu .right-move {
  position: absolute;
  right: 15px;
}
i {
  margin-right: 8px;
}
.el-menu--horizontal > .el-menu--popup > .el-menu-item {
  background-color: #12203d;
  color: white;
}
.el-menu--horizontal > .el-menu--popup > .el-menu-item:hover {
  background-color: #4899a388;
}
</style>
<style>
.top-menu .none-drop-submenu .el-submenu__icon-arrow {
  display: none;
}
.top-menu .el-submenu__title:hover {
  background-color: #22304d !important;
}
.top-menu .el-submenu__title {
  height: 100% !important;
}
.el-menu--horizontal > .el-menu--popup {
  padding: 0;
  border-radius: 5px;
}
.small-font li {
  font-size: 1em;
}
</style>
